<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar>
            <van-button
                slot="title"
                class="search-btn"
                icon="search"
                type="info"
                size="small"
                round
                to="/search"
                >搜索</van-button
            >
        </van-nav-bar>

        <!-- 文章频道列表 -->
        <van-tabs v-model="active" class="channel-tab">
            <div slot="nav-right" class="wap-nav-placeholder"></div>
            <div
                slot="nav-right"
                class="wap-nav-wrap"
                @click="isEditChannelShow = true"
            >
                <van-icon name="wap-nav" />
            </div>
            <van-tab
                border
                :key="item.id"
                v-for="item in userChannel"
                :title="item.name"
            >
                <!-- 子组件 文章内容 -->
                <article-list :channels="item"></article-list>
            </van-tab>
        </van-tabs>

        <!-- 频道编辑弹出层 -->
        <van-popup
            class="channel-edit"
            v-model="isEditChannelShow"
            position="bottom"
            :style="{ height: '100%' }"
            closeable
            get-container="body"
        >
            <!-- @update-active="onUpdateActive"
                $event 表示事件参数 -- index
                @update-active="active = $event"
            -->
            <channel-edit
                :user-channel="userChannel"
                :active="active"
                @close="isEditChannelShow = false"
                @update-active="onUpdateActive"
            ></channel-edit>
        </van-popup>
    </div>
</template>

<script>
import { getUserChannel } from '@/api/user'
// 引入子组件 文章内容
import ArticleList from './components/article-list'
import ChannelEdit from './components/channel-edit'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storage'

export default {
    data () {
        return {
            // 默认显示选中的标签页内容
            active: 0,
            // 文章频道列表
            userChannel: [],
            // 控制频道编辑弹出层是否显示
            isEditChannelShow: false
        }
    },
    created () {
        this.loadChannels()
    },
    methods: {
        async loadChannels () {
            // const { data: res } = await getUserChannel()
            // this.userChannel = res.data.channels
            // console.log(this.userChannel);
            let channel = ''
            if (this.user) {
                // 登录 获取用户频道列表
                const { data: res } = await getUserChannel()
                channel = res.data.channels
            } else {
                // 未登录 判断是否有本地存储的频道列表
                if (getItem('user-channel')) {
                    channel = getItem('user-channel')
                } else {
                    // 没有本地存储的频道列表就获取默认推荐的频道列表
                    const { data: res } = await getUserChannel()
                    channel = res.data.channels
                }
            }
            this.userChannel = channel
        },
        // 切换频道
        onUpdateActive (index) {
            this.active = index
        }
    },
    components: {
        ArticleList,
        ChannelEdit
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>

<style scoped>
.van-nav-bar /deep/ .van-nav-bar__title {
    max-width: none;
}
.search-btn {
    width: 277px;
    height: 32px;
    background-color: #5babfb;
    border: none;
}
.van-nav-bar .van-icon {
    font-size: 16px;
    color: #fff;
}
.van-button__text {
    font-size: 14px;
    line-height: 32px;
}
.channel-tab /deep/ .van-tab {
    border-right: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
    padding: 0 25px;
}
.channel-tab /deep/ .van-tabs__line {
    width: 30px;
    height: 3px;
    background-color: #3296fa;
}
.wap-nav-wrap {
    position: fixed;
    right: 0;
    width: 33px;
    height: 43px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}
.wap-nav-wrap::before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #ccc;
    position: absolute;
    left: 0;
}
.wap-nav-wrap .van-icon {
    font-size: 24px;
}
.wap-nav-placeholder {
    width: 32px;
    flex-shrink: 0;
}
</style>
